<script setup lang="ts">
import useUserStore from "@/store/modules/useUserStore";

const userStore = useUserStore();
const showLogin = ref(false);
</script>

<template>
  <div>
    <template v-if="userStore.hasLogin">
      <div class="flex-sc">
        <img
          class="w-16 h-16 rounded-full shadow-md"
          :src="userStore.user?.face"
        />
        <div class="line-clamp-1 text-lg font-bold ml-4">
          {{ userStore.user?.uname }}
        </div>
      </div>
      <div class="flex gap-x-4 mt-4">
        <div class="flex-sc text-sm text-gray-600">
          <span>uid:</span>
          <span class="ml-2">{{ userStore.user?.uid }}</span>
        </div>
        <div class="flex-sc text-sm text-gray-600">
          <span>房间号:</span>
          <span class="ml-2">{{ userStore.user?.room_id }}</span>
        </div>
      </div>
      <div class="flex gap-x-4 mt-4">
        <div class="flex-sc flex-col text-sm">
          <div class="text-gray-400">关注数</div>
          <div class="mt-2">{{ userStore.user?.following }}</div>
        </div>
        <div class="flex-sc flex-col text-sm">
          <div class="text-gray-400">粉丝数</div>
          <div class="mt-2">{{ userStore.user?.follower }}</div>
        </div>
        <div class="flex-sc flex-col text-sm">
          <div class="text-gray-400">获赞数</div>
          <div class="mt-2">{{ userStore.user?.likes }}</div>
        </div>
        <div class="flex-sc flex-col text-sm">
          <div class="text-gray-400">播放数</div>
          <div class="mt-2">{{ userStore.user?.archive_view }}</div>
        </div>
        <div class="flex-sc flex-col text-sm">
          <div class="text-gray-400">阅读数</div>
          <div class="mt-2">{{ userStore.user?.article_view }}</div>
        </div>
      </div>
    </template>
    <template v-else>
      <n-button type="primary" @click="showLogin = true">登录</n-button>
    </template>
    <MLogin v-model:show="showLogin" />
  </div>
</template>

<style scoped lang="scss"></style>
